<template>
  <div id="CententHead">
    <div id="CententDiv">
      <div id="CententHeadTheme" class="CententDivClass1">
        <div class="CententUlLeft">
          <div class="bolack-title" id="CententTC">
            题材
          </div>
        </div>

        <div class="CententUlRigth">
          <div v-bind:class="[ticaiInof==-1?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(-1)" value="-1">
            全部
          </div>
          <div v-bind:class="[ticaiInof==1?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(1)" value="1">
            正能量
          </div>
          <div v-bind:class="[ticaiInof==2?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(2)" value="2">
            冒险
          </div>
          <div v-bind:class="[ticaiInof==3?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(3)" value="3">
            热血
          </div>
          <div v-bind:class="[ticaiInof==4?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(4)" value="4">
            搞笑
          </div>
          <div v-bind:class="[ticaiInof==5?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(5)" value="5">
            恋爱
          </div>
          <div v-bind:class="[ticaiInof==6?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(6)" value="6">
            少女
          </div>
          <div v-bind:class="[ticaiInof==7?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(7)" value="7">
            少年
          </div>
          <div v-bind:class="[ticaiInof==8?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(8)" value="8">
            纯爱
          </div>
          <div v-bind:class="[ticaiInof==9?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(9)" value="9">
            日常
          </div>
          <div v-bind:class="[ticaiInof==10?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(10)" value="10">
            校园
          </div>
          <div v-bind:class="[ticaiInof==11?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(11)" value="11">
            运动
          </div>
          <div v-bind:class="[ticaiInof==12?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(12)" value="12">
            治愈
          </div>
          <div v-bind:class="[ticaiInof==13?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(13)" value="13">
            橘味
          </div>
          <div v-bind:class="[ticaiInof==14?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(14)" value="14">
            古风
          </div>
          <div v-bind:class="[ticaiInof==15?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(15)" value="15">
            玄幻
          </div>
          <div v-bind:class="[ticaiInof==16?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(16)" value="16">
            奇幻
          </div>
          <div v-bind:class="[ticaiInof==17?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(17)" value="17">
            后宫
          </div>
          <div v-bind:class="[ticaiInof==18?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(18)" value="18">
            惊奇
          </div>
          <div v-bind:class="[ticaiInof==19?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(19)" value="19">
            悬疑
          </div>
          <div v-bind:class="[ticaiInof==20?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(20)" value="20">
            都市
          </div>
          <div v-bind:class="[ticaiInof==21?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(21)" value="21">
            剧情
          </div>
          <div v-bind:class="[ticaiInof==22?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(22)" value="22">
            总裁
          </div>
          <div v-bind:class="[ticaiInof==23?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(23)" value="23">
            科幻
          </div>
          <div v-bind:class="[ticaiInof==24?'selected':'']" class="Z-right-title" v-on:click="ticaiChange(24)" value="24">
            同人
          </div>
        </div>
      </div>
      <div id="CententHeadRegion" class="CententDivClass1">
        <div class="CententUlLeft">
          <div class="bolack-title">
            地区
          </div>
        </div>
        <div class="CententUlRigth">
        <div class="Z-right-title" v-bind:class="[diquInof==-1?'selected':'']"  v-on:click="diquInofChange(-1)" value="-1">
            全部
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==1?'selected':'']"  v-on:click="diquInofChange(1)" value="1">
            中国大陆
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==2?'selected':'']"  v-on:click="diquInofChange(2)" value="2">
            中国台湾
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==3?'selected':'']"  v-on:click="diquInofChange(3)" value="3">
            美国
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==4?'selected':'']"  v-on:click="diquInofChange(4)" value="4">
            欧洲
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==5?'selected':'']"  v-on:click="diquInofChange(5)" value="5">
            日本
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==6?'selected':'']"  v-on:click="diquInofChange(6)" value="6">
            韩国
          </div>
          <div class="Z-right-title" v-bind:class="[diquInof==7?'selected':'']"  v-on:click="diquInofChange(7)" value="7">
            其他
          </div>
        </div>
      </div>
      <div id="CententHeadProcess" class="CententDivClass1">
        <div class="CententUlLeft">
          <div class="bolack-title">
            进度
          </div>
        </div>
        <div class="CententUlRigth">
        <div v-bind:class="[jinduInof==-1?'selected':'']" class="Z-right-title" v-on:click="jinduInofChange(-1)" value="-1">
            全部
          </div>
          <div v-bind:class="[jinduInof==1?'selected':'']" class="Z-right-title" v-on:click="jinduInofChange(1)" value="1">
            连载中
          </div>
          <div v-bind:class="[jinduInof==2?'selected':'']" class="Z-right-title" v-on:click="jinduInofChange(2)" value="2">
            完结
          </div>
        </div>
      </div>
      <div id="CententHeadSort" class="CententDivClass1">
        <div class="CententUlLeft">
          <div class="bolack-title">
            排序
          </div>
        </div>
        <div class="CententUlRigth">
        <div v-bind:class="[paixuInof==-1?'selected':'']" class="Z-right-title" v-on:click="paixuInofChange(-1)"  value="-1">
            人气推送
          </div>
          <div v-bind:class="[paixuInof==1?'selected':'']" class="Z-right-title" v-on:click="paixuInofChange(1)"  value="1">
            上架时间
          </div>
          <div v-bind:class="[paixuInof==2?'selected':'']" class="Z-right-title" v-on:click="paixuInofChange(2)"  value="2">
            追漫人数
          </div>
          <div v-bind:class="[paixuInof==3?'selected':'']" class="Z-right-title" v-on:click="paixuInofChange(3)"  value="3">
            更新时间
          </div>
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  name: "CententHead",
  data(){
    return{
      ComicList: [],
      ticaiInof:-1,
      diquInof:-1,
      jinduInof:-1,
      paixuInof:-1,
    }
  }, 
  methods:{
    ticaiChange:function(index){
      this.ticaiInof=index;
    },
    diquInofChange:function(index){
      this.diquInof=index;
    },
    jinduInofChange:function(index){
    this.jinduInof=index;
    },
    paixuInofChange:function (index) 
    {
      this.paixuInof=index;
    },
  },
  create(){
    this.ComicList = [
      {
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "死亡笔记",
        ComicCtentent: "死亡笔记666",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "海贼王666",
      },
      {
        ComicID: "1",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "凌林辉",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "2",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "龙少林",
        ComicCtentent: "龙少林天下无敌",
      },
      {
        ComicID: "3",
        ComicImgUrl: require("../ImgTop6/DemonSlayerBIG.jpg"),
        Comictitle: "绯村剑心",
        ComicCtentent: "绯村剑心666",
      },
      {
        ComicID: "4",
        ComicImgUrl: require("../ImgTop6/OnePieceBIG.jpg"),
        Comictitle: "火影忍者",
        ComicCtentent: "火影忍者666",
      },
      {
        ComicID: "5",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "死亡笔记",
        ComicCtentent: "死亡笔记666",
      },
      {
        ComicID: "6",
        ComicImgUrl: require("../ImgTop6/OnePunchManBIG.jpg"),
        Comictitle: "海贼王",
        ComicCtentent: "海贼王666",
      },
    ];
  }
};
</script>

<style>
/*题材*/
#CententTC{
  position:relative;
  top:-41px;
}

/*选中样式*/
.selected{
    animation-name: tcdonghua;
    animation-duration:1s;
    animation-fill-mode: forwards;
}

@keyframes tcdonghua{
  from{
    color: white;
    background-color: blue;
    
  }
  to{
    color: rgb(64, 64, 255);
    background-color: white;
  }
}
/**/
#CententDiv {
  width: 100%;
}
/*头部注释一级*/
#CententHead {
  /*border: 1px solid black;*/
  width: 1160px;
  margin: 0px auto;
  height: 205px;
  padding-bottom:20px ;
}

/*头部小容器*/
#CententDiv {
  /*border: 1px solid red;*/
  margin: 25px auto;
}


/*题材标题*/
.bolack-title {
  color: rgba(0, 0, 0, 0.34);
  /*border: 1px solid black;*/
  font-size: 14px;
}


.CententUlRigth {
  display: inline-block;
  width: 1110px;
  /*border:1px blue solid;*/
}
/*题材标题*/
.CententUlLeft{
  display: inline-block;
  margin-right: 14px;
}
/*题材子标题*/
.Z-right-title {
  display: inline-block;
  color: rgba(0, 0, 0, 0.87);
  border-radius: 5px;
  font-size: 14px;
  margin-bottom:20px;
  padding-left: 12px;
  padding-right: 12px;
}
.Z-right-title:hover{
    cursor:pointer;
}
</style>
